<!--
 * @Author: bao
 * @Description: 消费记录列表
 * @Date: 2020-02-02 14:53:02
 -->
<template>
  <div>
    <div class="swaperbox">
      <p class="title">
        <a-breadcrumb style="margin: 16px 0;color: #666666FF;font-size: 14px;">
          <a-breadcrumb-item
            ><a @click="$router.go(-1)">资源明细</a></a-breadcrumb-item
          >
          <a-breadcrumb-item>表结构详情</a-breadcrumb-item>
        </a-breadcrumb>
      </p>
      <p class="p1">基本信息</p>
      <div class="btnBox">
        <div class="box">
          <div class="single-search-item">
            <div class="item-label">表名：</div>
            <div class="item-content">
              {{ info.tableEname }}
            </div>
          </div>
          <div class="single-search-item">
            <div class="item-label">表名中文名：</div>
            <div class="item-content">
              {{ info.tableCname }}
            </div>
          </div>
          <div class="single-search-item">
            <div class="item-label">数据来源单位：</div>
            <div class="item-content">
              {{ info.sourceDepartment }}
            </div>
          </div>
          <div class="single-search-item">
            <div class="item-label">资源编号：</div>
            <div class="item-content">
              {{ info.sourceId }}
            </div>
          </div>
          <div class="single-search-item">
            <div class="item-label">数据来源系统：</div>
            <div class="item-content">
              {{ info.sourceSystem }}
            </div>
          </div>
          <div class="single-search-item">
            <div class="item-label">是否消费：</div>
            <div class="item-content">
              {{ info.isConsume }}
            </div>
          </div>
          <div class="single-search-item">
            <div class="item-label">共享范围：</div>
            <div class="item-content">
              {{ info.sharingRange }}
            </div>
          </div>
          <div class="single-search-item">
            <div class="item-label">共享方式：</div>
            <div class="item-content">
              {{ info.sharingMode }}
            </div>
          </div>
          <div class="single-search-item">
            <div class="item-label">包含要素：</div>
            <div class="item-content">
              {{ info.containsElements }}
            </div>
          </div>
          <div class="single-search-item">
            <div class="item-label">资源摘要：</div>
            <div class="item-content">
              {{ info.remarks }}
            </div>
          </div>
          <!-- <div class="single-search-item">
            <div class="item-label">更新周期：</div>
            <div class="item-content">
              {{ info.updateType }}
            </div>
          </div> -->
          <div class="single-search-item">
            <div class="item-label">资源目录编号：</div>
            <div class="item-content">
              {{ info.directoryCode }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="swaperbox">
      <p class="p1">表结构</p>
      <div class="butBox">
        <a-button v-if="userType === 1" type="primary" @click="onInTabel"
          >导入表资源</a-button
        >
        <a-button v-if="userType === 1" type="primary" @click="onOutTabel1"
          >导出表资源</a-button
        >
        <a-button type="primary" @click="onOutTabel2">导出表结构</a-button>
      </div>
      <div class="btnBox btnBox1">
        <div class="box box1">
          <div class="single-search-item">
            <div class="item-label">ORACLE字段名：</div>
            <div class="item-content">
              <a-input
                v-model="getPars.columnName"
                placeholder=""
                style="width: 240px;"
              />
            </div>
          </div>
          <div class="single-search-item">
            <div class="item-label">ORACLE字段描述：</div>
            <div class="item-content">
              <a-input
                v-model="getPars.comments"
                placeholder=""
                style="width: 240px;"
              />
            </div>
          </div>
          <div class="single-search-item" style="width:190px;">
            <a-button type="primary" @click="startRefresh">查询</a-button>
            <a-button type="primary" @click="reSet" style="margin-left:20px"
              >重置</a-button
            >
          </div>
        </div>
      </div>
      <a-table
        style="overflow-x: scroll; padding 0 10px"
        :columns="userType === 1 ? listObject.columns : listObject.columns1"
        :dataSource="listObject.list"
        :loading="listObject.loading"
        :pagination="pagination"
        rowKey="id"
        @change="handleTableChange"
      >
        <span slot="order" slot-scope="text, record, index">
          <em>{{ index + 1 }}</em>
        </span>
        <template slot="todo" slot-scope="text, record">
          <div class="table-tr-todo">
            <a href="javascript:;" @click="onEdit(record)">编辑</a>
            <!-- <a-divider type="vertical" />
            <a-popconfirm
              title="确定删除当前表结构吗?"
              @confirm="() => onDelete(record)"
              okText="确定"
              cancelText="取消"
            >
              <a href="javascript:;" style="color:#FF0033">删除</a>
            </a-popconfirm> -->
          </div>
        </template>
      </a-table>
    </div>
    <mTable ref="mb" @addSuccess="getList" @updateSuccess="getList" />
    <zyTable ref="zytb" @addSuccess="getList" @updateSuccess="getList" />
    <jgTable ref="jgtb" @addSuccess="getList" @updateSuccess="getList" />
    <importTable
      ref="importtb"
      @addSuccess="getList"
      @updateSuccess="getList"
    />
  </div>
</template>

<script>
import { page } from "@/api";
import mTable from "./components/mTable";
import zyTable from "./components/zyTable";
import jgTable from "./components/jgTable";
import importTable from "./components/importTable";
import { getUser, setDetailId, getDetailId } from "@/libs/util";
export default {
  components: {
    mTable,
    zyTable,
    jgTable,
    importTable
  },
  data() {
    return {
      listObject: {
        loading: false,
        list: [],
        columns: [
          {
            title: "序号",
            align: "center",
            dataIndex: "order",
            scopedSlots: { customRender: "order" },
            width: 80,
            customRender: (text, record, index) =>
              `${(this.pagination.current - 1) * this.pagination.pageSize +
                (index + 1)}`
          },
          {
            title: "ORACLE字段名",
            dataIndex: "fieldName",
            scopedSlots: { customRender: "fieldName" },
            align: "center"
          },
          {
            title: "ORACLE字段描述",
            dataIndex: "fieldDescribe",
            scopedSlots: { customRender: "fieldDescribe" },
            align: "center"
          },
          {
            title: "ORACLE字段类型",
            dataIndex: "fieldType",
            scopedSlots: { customRender: "fieldType" },
            align: "center"
          },
          {
            title: "ORACLE字段长度",
            dataIndex: "fieldLength",
            scopedSlots: { customRender: "fieldLength" },
            align: "center"
          },
          {
            title: "操作",
            width: 200,
            dataIndex: "todo",
            scopedSlots: {
              customRender: "todo"
            }
          }
        ],
        columns1: [
          {
            title: "序号",
            align: "center",
            dataIndex: "order",
            scopedSlots: { customRender: "order" },
            width: 80,
            customRender: (text, record, index) =>
              `${(this.pagination.current - 1) * this.pagination.pageSize +
                (index + 1)}`
          },
          {
            title: "ORACLE字段名",
            dataIndex: "fieldName",
            scopedSlots: { customRender: "fieldName" },
            align: "center"
          },
          {
            title: "ORACLE字段描述",
            dataIndex: "fieldDescribe",
            scopedSlots: { customRender: "fieldDescribe" },
            align: "center"
          },
          {
            title: "ORACLE字段类型",
            dataIndex: "fieldType",
            scopedSlots: { customRender: "fieldType" },
            align: "center"
          },
          {
            title: "ORACLE字段长度",
            dataIndex: "fieldLength",
            scopedSlots: { customRender: "fieldLength" },
            align: "center"
          }
        ]
      },
      pagination: {
        current: 1,
        pageSize: 20
      },
      getPars: {
        currentPage: 1,
        pageSize: 10
      },
      id: this.$route.params.id,
      info: { tableEname: "", tableCname: "" },
      // file: null,
      // fileList: []
      userType: ""
    };
  },
  created() {
    if (this.id !== undefined) {
      setDetailId(this.id);
    } else {
      this.id = getDetailId();
    }
    this.userType = getUser().userType;
    this.getDetail();
  },
  computed: {},
  mounted() {},
  methods: {
    reSet() {
      this.getPars = {
        currentPage: 1,
        pageSize: 10,
        columnName: "",
        comments: ""
      };
      this.getList();
    },
    onInTabel() {
      this.$refs.importtb.show(this.info.tableEname);
    },
    onOutTabel1() {
      let obj = {
        // columns: "11", // 导出的字段列表，以逗号隔开【说明：在逃人员编号=ZTRYBH,姓名=XM,证件号码=ZJHM】
        fieldName: "rksj", // 时间字段名称
        tableName: this.info.tableEname, // 表名
        type: "xls" // 导出格式：xlsx，csv
      };
      this.$refs.zytb.show(obj);
    },
    onOutTabel2() {
      let obj = {
        tableName: this.info.tableEname // 表名
      };
      this.$refs.jgtb.show(obj);
    },
    onEdit(record) {
      this.$refs.mb.show(this.info.tableEname, record);
    },
    onDelete(record) {
      let params = {
        tableName: this.info.tableEname,
        oldFieldName: record.fieldName
      };
      page
        .deleteTableStructure(params)
        .then(res => {
          if (res.data.code === -1) {
            this.$message.warning(res.data.message);
          } else {
            this.$message.success("删除表结构成功！");
            this.getList();
          }
        })
        .catch(() => {
          this.$.warning("删除表结构失败");
        });
    },
    startRefresh() {
      this.getPars.currentPage = 1;
      this.getList();
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination = pagination;
    },
    getList() {
      this.listObject.loading = true;
      let params = Object.assign(this.getPars, {
        tableName: this.info.tableEname
      });
      page.getTableStructureList(params).then(res => {
        // let { current, size, total } = res.data.data;
        this.listObject.list = res.data.data;
        this.listObject.loading = false;
        this.pagination.total = res.data.data.length;
        // this.setPagination(current, size, total);
      });
    },
    getDetail() {
      page.tableDetail({ sourceId: this.id }).then(res => {
        this.info.tableEname = res.data.data.tableEname;
        this.info.tableCname = res.data.data.tableCname;
        this.info.sourceDepartment = res.data.data.sourceDepartment;
        this.info.sourceId = res.data.data.sourceId;
        this.info.directoryCode = res.data.data.directoryCode;
        this.info.sourceSystem = res.data.data.sourceSystem;
        if (res.data.data.isConsume === 1) {
          this.info.isConsume = "是";
        } else {
          this.info.isConsume = "否";
        }
        this.info.sharingRange = res.data.data.sharingRange;
        this.info.sharingMode = res.data.data.sharingMode;
        this.info.containsElements = res.data.data.containsElements;
        this.info.remarks = res.data.data.remarks;
        this.info.updateType = res.data.data.updateType;
        this.getList();
      });
    },
    setPagination(current, size, total) {
      this.pagination = {
        current: current,
        pageSize: size,
        total: total,
        showQuickJumper: true,
        showTotal: total => `共 ${total} 条记录`
      };
    }
  }
};
</script>

<style scoped lang="less">
.swaperbox {
  position: relative;
  margin: 15px 15px 15px 10px;
  background-color: #fff;
}
.butBox {
  position: absolute;
  right: 0;
  top: 0;
  .ant-btn {
    margin: 10px 20px;
  }
}
.p1 {
  font-size: 20px;
  font-weight: bold;
  padding: 10px;
}
.title {
  padding: 10px;
  font-size: 24px;
  color: #333333ff;
  padding-bottom: 10px;
  border-bottom: 2px solid #ccccccff;
}
.btnBox {
  position: relative;
  height: 170px;
  overflow: hidden;
  // margin-top: 30px;
  .btn {
    margin-left: 12px;
    margin-top: 10px;
  }
  .box {
    position: absolute;
    right: 0;
    top: 0;
    .single-search-item {
      // display: inline-block;
      float: left;
      width: 317px;
      padding: 10px;
    }
    .item-label {
      display: inline-block;
      width: 98px;
      text-align: right;
    }
    .item-content {
      display: inline-block;
      width: 198px;
    }
  }
}
.btnBox1 {
  position: relative;
  height: 80px;
  overflow: hidden;
  // margin-top: 30px;
  .btn1 {
    margin-left: 12px;
    margin-top: 10px;
  }
  .box1 {
    position: absolute;
    left: 0;
    top: 0;
    .single-search-item {
      // display: inline-block;
      float: left;
      width: 380px;
      padding: 20px 10px;
    }
    .item-label {
      display: inline-block;
      width: 121px;
      text-align: right;
    }
    .item-content {
      display: inline-block;
      width: 198px;
    }
  }
}
</style>
